/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*///////////////////Default custom styles///////////////////*/
body {  /*These are the default text styles*/
    color: #333333;
    line-height: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
h1, h2, h3, h4 { /*Default headings font family and color*/
    font-family:Tahoma, Geneva, sans-serif, 
        "Engel Light ltd", Georgia, "Trebuchet MS", sans-serif;
    color: #2A2A2A;
    font-weight: normal;
    padding-bottom: 15px; /*Defines the space between the headeing and the next element, usually a <p> element*/
}
h1 {
    font-size: 36px;
    line-height: 38px;
}
h2 {
    font-size: 24px;
    padding-bottom: 25px;
}
h3 {
    font-size: 21px;
}
h4 {
    font-size: 18px;
}
a {
    text-decoration: none;
    color: #31AEF2;
    outline: none;
}
a:hover {
    text-decoration: none;
    color: #027BC4;
}
ul.green {
    margin: 20px 0px 20px 0px;
}
ul.green li { /*This style will be applied to all list items of unordered lists that have the class "green" and it adds a green check icon on each item*/
    list-style: none;
    background:url(../images/check.png) no-repeat left center; /*Uses background image instead of "list-image" because it can be centered*/
    line-height: 28px;
    padding-left: 25px;
    margin-bottom: 5px;
}
ul.orange li { /*This style will be applied to all list items of unordered lists that have the class "orange" and it adds an orange arrow bullet on each item*/
    list-style: none; /*Uses background image instead of "list-image" because it can be centered*/
    padding-left: 25px;
    margin-bottom: 8px;
    background: url(../images/arrow.png) no-repeat left center;
}
ul.orange li a {
    color: #696969;
}
ul.orange li a:hover {/*This rule defines the hover effect on all list items (li) inside the unordered lists (ul) with the class "orange"*/
    color: #31AEF2;
    padding-left: 5px;
}/*
span.blue {
        color: #31AEF2;
}
span.clientName {
        text-transform: uppercase;
        color: #3E3E3E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
}
span.gray {
        color: #666666;
}*/

a.linkYellow, a.linkYellow:hover{
    color:#FF0;
}

a.linkGrayO, a.linkGrayO:visited{ color:#666;}
a.linkGrayO:hover{color:#FF6600;}

a.bt-green{
    height: 28px; width: 93px;
    display:inline-block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px; text-align: center;
    padding-top: 3px; font-weight: bold;
    background:url(../images/bt-green.png) no-repeat;
    color:#FFFFFF
}
a.bt-green:hover{color: #C30;}


input.bt-gr{
    height: 27px; width: 82px;
    display:inline-block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px; text-align: center;
    padding-top: 3px; font-weight: bold;
    background:url(../images/bt-gr.png) no-repeat;
    color:#000;
    border:0px;
}
input.bt-gr:hover{color: #C30;}
input.bt-gr:active{background:url(../images/bt-gr-action.png) no-repeat;}


a.bt-white, a.bt-yellow {
    height: 32px; width: 120px;
    display:inline-block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px; text-align: center;
    padding-top: 6px; font-weight: bold;
}
a.bt-white, a.bt-white:visited{
    background:url(../images/bt-white.png) no-repeat;
    color: #C30;
}
a.bt-yellow, a.bt-yellow:visited {
    background:url(../images/bt-yellow.png) no-repeat;
    color: #333;
}
a.bt-white:hover{	color: #000C30;}
a.bt-yellow:hover{	color: #FFF;}


a.bt-gr{
    height: 27px; width: 82px;
    display:inline-block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px; text-align: center;
    padding-top: 3px; font-weight: bold;
    background:url(../images/bt-gr.png) no-repeat;
    color:#000;
}
a.bt-gr:hover{color: #C30;}
a.bt-gr:active{background:url(../images/bt-gr-action.png) no-repeat;}

.floatleft{float:left;}
.floatright{float:right;}
/*///////////////////End default custom styles///////////////////*/

#top-content, #header-content, #orange-content, .main-container, #gray-content, #footer-content, #bottom-box, #bottom-bar-content  {
    width: 960px;
    margin: 0 auto; /*This rule grabs all the containers in the page and centers them by setting the left and right margins to auto while keeping the right and left margins to 0*/
    padding: 0px 10px 0px 10px; /* adds 10 pixels of padding on the left and right edges of the elements listed above. The top and bottom paddings are set to 0 because I will add that on ech individual element if needed*/
}

/*////////////////////Main content///////////////////*/
#top-map-product{
    font-family: Tahoma;
    color: #000;
    padding-bottom: 30px;
}
#top-map-product a{font-family: Tahoma;color: #666;}
#top-map-product a:hover{font-family: Tahoma;color: #000;}
/*////////////////////End Main content///////////////////*/


/*///////////////////Top content///////////////////*/
#top-container {
    height: 40px;
    background: url(../images/header-top-shadow2.png) repeat-x top;
}
#top-content {
    position: relative;
    height: 20px;
    padding-top: 5px; /*The padding + the height value make 120 pixels which is the heigh of the top navigation pannel*/	
}
#top-content #h1 {
    height: 26px;
    width: 100px;
    background: url(../images/logo.png) no-repeat;
    text-indent: -9999px;
    float: left;
}
#top-content #h1 a {
    height: 26px;
    width: 100px;
    display: block;
}

#top-content form{
    position: relative;
    float: left;
    padding: 0;
    margin: 0 30px;
}
#top-content input[type="text"]{
    border:1px solid #d1c7ac;
    padding:1px 8px;
    width: 200px;
    float: left;
    color:#333333;
}
#top-content input[type="button"], input[type="submit"]{
    padding: 0px 6px;
    margin: 0px 8px;
    background-color:#F63;
    color:#00C;
    border-width:0px;
    height:20px;
    font-weight: bold;
}

#top-content ul.menu {
    position: relative;
    float: left;
    padding: 0;
    margin: 0;
}
#top-content ul.menu li {
    position: relative;
    float: left;
    padding: 0px 0px 0px 15px;
    font-family:"Times New Roman", Times, serif;
    font-size: 13px;
    color: #bfbfbf;
}
#top-content ul.menu ul {/*Rules applied to the dropdown list*/
    position: absolute; /*Aligns the dropdown list items vertically relative to the parent LI*/
    visibility: hidden;
    display: block;
    z-index: 1000;/*this z-index makes the list items of the dropdown menu appear above all the other elements on the page*/
}
#top-content ul.menu ul li {
    min-width: 180px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 35px;
    background: #1B1B1B;
    border-bottom: 1px solid #333333;
}
#top-content ul.menu ul li a {
    height: 35px;
    min-width: 180px;
    display: block;
}
#top-content ul.menu ul li:hover {
    background-color: #272727;
}
#top-content ul.menu li:hover ul {
    visibility: visible;
}
#top-content ul.menu li a {
    text-decoration: none;
    height: 25px;
    display: block;
    color: #bfbfbf;
}
#top-content ul.menu li a:hover {
    text-decoration: none;
    color: #31AEF2;
}

#top-content .login{
    display: block;
    float: right;
    color: #bfbfbf;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    margin-left: 10px;
}
#top-content .login:hover {
    color: #31AEF2;
}

/*///////////////////End Top content///////////////////*/

/*///////////////////Header content///////////////////*/

#header-container {
    background: url(../images/header-noise-bg.jpg);
}

#header-content {
    position: relative;
    min-height: 300px;
    padding-top: 20px;
    overflow: hidden;	
    color: #ffffff;
}

#header-content div.featured {
    width: 350px;
    float: left;
    text-align: justify;
}

#header-content div.featured h1 {
    font-family: Arial, Tahoma, sans-serif;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
}

#header-content #slideshow {
    position: relative;
    width: 554px;
    height: 266px;
    background: url(../images/screen.png) no-repeat center;
    float: right;
    display: block;
}

#header-content #slideshow img {
    position: absolute;	
    top: 18px;
    left: 26px;
    width:500px;
    height:225px;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}


/*///////////////////End header content///////////////////*/

/*///////////////////Main content///////////////////*/
.main-container {
    clear: both;
    overflow: hidden;
    padding: 20px 0 20px 0;
}
/*///////////////////End main content///////////////////*/

/*///////////////////Bottom bar///////////////////*/

#bottom-bar-container {
    height: 40px;
    background-color: #090909;
    background: url(../images/bottom-bar-bg2.png) repeat-x;
    color:#CCCCCC;
}
#bottom-bar-content {
    padding-top: 12px;
}
#bottom-bar-content div.copyright {
    float: left;
}
#bottom-bar-content div.bar-info {
    float: right;
}
#bottom-bar-content div.bar-info a {
    color: #696969;
}
#bottom-bar-content div.bar-info a:hover {
    color: #D7D7D7;
}

/*///////////////////End bottom bar///////////////////*/

/*///////////////////footer///////////////////*/
#footer-container {
    clear: both;
    overflow: hidden;
    background-color: #242424;
    border-top: solid 4px #127CFE;
    color: #a49384;
}

#footer-content {
    margin-top: 10px;
}

#footer-container ul li a {
    color: #a49384;
    display: block;
}

#footer-container ul li a:hover {
    color: #a49384;	
    padding-left: 5px;
}

/*################Footer social links styles. These rules are only applied to unordered lists inside the footer###############*/
#footer-container ul.ul-footer li {
    margin-bottom: 10px;
}

#footer-container ul li.tweet {
    list-style: none;
    background: url(../images/twitter24.png) no-repeat left center;
    padding-left: 35px; /*the background icon is 24x24 pixels. If you use bigger social icons increase the padding.*/
}

#footer-container ul li.face {
    list-style: none;
    background: url(../images/facebook24.png) no-repeat left center;
    padding-left: 35px; /*the background icon is 24x24 pixels. If you use bigger social icons increase the padding.*/
}

#footer-container ul li.link{
    list-style: none;
    background: url(../images/linkedin24.png) no-repeat left center;
    padding-left: 35px; /*the background icon is 24x24 pixels. If you use bigger social icons increase the padding.*/
}

#footer-container ul li.news {
    list-style: none;
    background: url(../images/newsvine24.png) no-repeat left center;
    padding-left: 35px; /*the background icon is 24x24 pixels. If you use bigger social icons increase the padding.*/
}

#footer-container ul li.found {
    list-style: none;
    background: url(../images/found24.png) no-repeat left center;
    padding-left: 35px; /*the background icon is 24x24 pixels. If you use bigger social icons increase the padding.*/
}
/*################End footer social links styles###############*/

#footer-container h3 {/*This rule determines the color of the headings that appear on the footer. The font family and size are set on the top of the document on the Default custom styles*/
    color: #ffffff;
}

#footer-container h3.logo {/*this rules replace the heading of the 4th row with a logo. If you use a custom logo make sure you also change the width and height to fit your logo size. Use a similar size logo or you might have to change other css rules to realign the content properly*/
    width: 165px;
    height: 26px;
    margin-top: -5px;
    text-indent: -9999px;
    background: url(../images/footer-logo.png) no-repeat center;
}

div.footer-col {
    padding-top: 20px;
    float: left;
    margin-left: 15px;
    margin-bottom: 30px;
    width: 220px;
}


div.footerForm {
    margin-top: 20px;
}

div.footerForm label {
    padding-right: 10px;

}

div.footerForm input {
    float: right;
    color: #A49384;
}

div.footerForm input.text {
    border: solid 1px #3E3E3E;
    background-color: #333333;
}

div.footerForm input.subscribeBtn {
    background: url(../images/subscribe-btn.png) no-repeat;
    border: 0px;
    color:#FFFFFF;
    height: 19px;
    width: 59px;
    text-align:center;
    padding:0 0px;
}

div.footerForm p {
    padding-bottom: 6px;
}

/*///////////Gray content///////////*/
#gray-container {
    clear: both;
    background:url(../images/gray-bg.jpg) repeat;
    min-height: 100px;
    border-bottom: solid 1px #c6c6c6;
    border-top: solid 1px #c6c6c6;
    overflow:hidden;
}
#gray-content {
    background: url(../images/gray-bg.jpg) repeat;
}
#gray-content h1 {
    text-align: center;
    padding-top: 20px;
    color: #505050;
    text-shadow: #F8F8F8 1px 1px;
}
#gray-content div.gray-col {
    width: 168px; background-color:#FFF;
    text-align: center;	
    margin: 10px 0px 10px 20px;
    float: left; 
    display: inline;
    text-align:center;
    width: 168px;
    height: 100px;
}

#gray-content div.gray-col p {
    font-family: Rockwell, Arial, Tahoma, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top: 40px;
}

#gray-container div.hardware-col {
    background-color: #0A6899;
}
#gray-container div.software-col {
    background-color: #586BAC;
}

#gray-container div.laptop-col {
    background-color: #457D3B;
}

#gray-container div.mobile-col {
    background-color: #54ADB5;
}

#gray-container div.tablet-col {
    background-color: #681141;
}


#gray-content div.gray-col img {
    margin-bottom: 10px;
}
#gray-content a {
    font-family: 'Segoe UI Semilight',Tahoma,Arial,Verdana,Sans-Serif;
    font-size: 10pt;
    font-weight: 200;
    line-height: 14px;
    color: #FFF;
    border: 2px solid #E1E1E1;
}
#gray-content a:hover{
    color:#FFF;
    font-weight: 300;
    font-size: 11pt;

}
/*///////////End Gray content///////////*/

.detail-title{
    color: #666666;
    font-size: 18px !important;
    font-weight: bold !important;
}

.content-article-view p img {
    width: 400px !important;
}